<!-- 滑动切换选项卡演示(标准写法) -->
<template>
	<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
	<z-paging-swiper>
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
		<!-- <z-tabs ref="tabs" slot="top" :list="tabList" :current="current" @change="tabsChange" ></z-tabs> -->
		<cl-tabs :class="$tm.vx.state().tmVuetify.black?'grey-darken-4 bk':''" ref="tabs" :tab-bars="tabList" :tab-index="current" @tabChange="tabsChange" center aniType="extend"
			type="hang" :textColor="$tm.vx.state().tmVuetify.black?'#f5f5f5':'#0a0a0a'" class="tabs" :sliderMargin="20">
		</cl-tabs>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" :current="current" @animationfinish="animationfinish" @transition="transition"
			@change="changeCurrent">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<swiper-list-item :tabIndex="index" :currentIndex="current"></swiper-list-item>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['关注', '推荐', '同城'],
				current: -1, // tabs组件的current值，表示当前活动的tab选项
				sysWidth: 0,
				source: 'touch',
				fristTouch: false
			};
		},
		onLoad() {
			this.sysWidth = uni.getSystemInfoSync().screenWidth
			//#ifndef H5
			this.fristTouch = true
			//#endif
		},
		mounted() {
			this.current = 1
		},
		methods: {
			//tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			changeCurrent(e) {
				this.source = e.detail.source
			},
			transition(e) {
				if (this.source == '') {

				} else {
					if (this.fristTouch) {
						this.$refs.tabs.move(e.detail.dx - this.tabCurrentIndex * this.sysWidth)
					} else {
						this.$refs.tabs.move(e.detail.dx)
					}
				}
			},
			//swiper滑动结束
			animationfinish(e) {
				this.fristTouch = false
				this.source = 'touch'
				let current = e.detail.current;
				this.current = current;
			}
		}
	}
</script>

<style>
	.swiper {
		height: 100%;
	}
</style>
